<template>
  <div>
    <navComp :title="$route.meta.title" :back="$route.meta.back"></navComp>
    <van-swipe-cell class="box" v-for="item in shooplist" :key="item.id">
      <van-card
        :price="item.price"
        desc="描述信息"
        :title="item.goodsname"
        class="goods-card"
        :thumb="`http://localhost:3000${item.img}`"
      >
        <template #num>
          <van-stepper
            v-model="item.num"
            input-width="40px"
            button-size="32px"
            min="1"
            max="8"
          />
        </template>
        <template #tags>
          <van-checkbox v-model="item.status" class="left" @click="changkeOn"
            >复选框</van-checkbox
          >
        </template>
      </van-card>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="del"/>
      </template>
    </van-swipe-cell>
    <van-submit-bar
      :price="sun.countMoney * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="chenckOk">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      uid: this.$utils.getUid(),
      shooplist: [],
      // value: 10,
      checked: false,
    };
  },
  computed: {
    sun() {
      let count = this.shooplist.reduce(
        (prev, item, index) => {
          if (item.status) {
            prev.countMoney += parseFloat(item.price) * parseInt(item.num);
            prev.countNumber += parseInt(item.num);
          }
          return prev;
        },
        { countMoney: 0, countNumber: 0 }
      );
      return count;
    },
  },
  created() {},
  mounted() {
    this.reqCartLists();
  },
  methods: {
    reqCartLists() {
      this.$api.reqCartList({ uid: this.uid }).then((res) => {
        console.log(res);
        this.shooplist = res.data.list;
        this.shooplist.forEach((item) => {
          // console.log(item);
          item.status = false;
        });
      });
    },
    changkeOn(info) {
      // console.log(info);
      this.checked = this.shooplist.every((item) => item.status);
    },
    chenckOk() {
      this.shooplist.forEach((item) => (item.status = this.checked));
    },
    onSubmit() {
      let submit = [];
      this.shooplist.forEach((item) => {
        console.log(item);
        if (item.status) submit.push(item);
      });
      if (submit.length == 0) {
        this.$notify({
          type: "warning",
          message: "请选择商品信息！",
        });
        return;
      }
      localStorage.setItem(
        "orderData",
        JSON.stringify({ submit, ...this.sun })
      );

      this.$router.push("/orderconfirm");
    },
    del(id){
      this.$api.reqdel((id)).then((res)=>{
        console.log(res);
      })
    }
  },
};
</script>
<style scoped lang="scss">
.goods-card {
  margin: 0;
  // background-color: white;
}

.delete-button {
  height: 100%;
}
.box {
  margin-top: 40px;
}
</style>
